<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度贴吧--全中国最大的中文社区</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap-table.js"></script>
    <script src="../js/bootstrap-table-zh-CN.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.js"></script>
    <script src="/file/bootstrap.min.js"></script>
    <script src="/js/jquery.form.js"></script>

    <style>
        #t2 img {
            width: 20%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-4 column" style="padding: 0px">

                            <pre style="background-color: white;border: 0px">                       <a
                                    href="http://www.baidu.com"><img
                                    style="width: 185px;height: 90px" src="/img/baidu_logo.jpg" alt=""></a></pre>

                    </div>
                    <div class="col-md-4 column" style="padding: 0px">
                        <br><br><br>


                        <input type="text" style="width: 300px;height: 40px"/>
                        <button type="button" class="btn btn-info" style="height: 40px;width: 78px">进入贴吧</button>
                    </div>
                    <div class="col-md-4 column" style="padding: 0px">

                        <br><br><br>
                        <input type="submit" style="height: 40px;width: 80px" value="全吧搜索"/>

                    </div>

                </div>
            </div>
        </div>


        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-2 column">
                </div>
                <div class="col-md-7 column">

                    <div class="row clearfix">
                        <div id="t" style="font-size: 20px;" class="col-md-12 column">
                            <hr>
                        </div>

                    </div>

                    <div class="row clearfix" style="border: black 1px solid">
                        <hr>


                        <div style="font-size: 15px" class="col-md-12 column">
                            <div class="col-md-12">
                                <div class="col-md-3">
                                    <div><a id="U_Icon" href=""></a></div>
                                    <br>
                                    <div><a id="U_Name" href=""></a></div>


                                </div>
                                <div class="col-md-9" style="border: #9DA0A4 1px solid" id="t1"><p></p>
                                </div>


                            </div>
                            <div style="height: 100%" class="col-md-12">
                                <div>
                                    <table>
                                        <tr>
                                            <td id="t4">
                                                <!--<div style="width: 120px"id="t4" class="col-md-3">-->

                                                <!--</div>-->

                                            </td>
                                            <td>&nbsp&nbsp</td>
                                            <td id="t2">
                                                <!--<div class="col-md-9" id="t2"></div>-->
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>

                                            </td>
                                        </tr>
                                    </table>


                                </div>
                            </div>

                        </div>


                    </div>
                </div>
                <div class="col-md-3 column">
                    <div class="col-lg-12" style="height: 200px"></div>

                    <a id="modal-489874" href="#modal-container-489874" role="button" class="btn btn-info"
                       data-toggle="modal">回帖</a>


                    <form id="form_sendReply">
                        <div class="modal fade" id="modal-container-489874" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-hidden="true">×
                                        </button>
                                        <!--<h4 class="modal-title" id="myModalLabel">-->
                                        <!--标题:<input name="topic" type="text">-->
                                        <!--</h4>-->
                                    </div>
                                    <div id="rContents" style="width: 100%" class="modal-body">

                                    </div>
                                    <textarea name="rContents" hidden id="text1"
                                              style="width:100%; height:200px;"></textarea>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            取消
                                        </button>
                                        <button type="button" class="btn btn-primary" onclick="sendReply_btn();">发表
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>


                    <form id="form_sendFloor">
                        <div class="modal fade" id="modal-container-987654321" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-hidden="true">×
                                        </button>

                                    </div>
                                    <!--<div id="rContents" style="width: 100%" class="modal-body">-->

                                    <!--</div>-->
                                    <!--<textarea name="rContents" hidden id="text1"-->
                                    <!--style="width:100%; height:200px;"></textarea>-->

                                    <input id='reply' name='rid' hidden>

                                    <!--<input type="text" hidden name="rid" id="rid">-->

                                    内容: <textarea name="reContents" id="reContents" cols="70" rows="5"></textarea>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            取消
                                        </button>
                                        <button type="button" class="btn btn-primary" onclick="sendFloor_btn();">回复
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>


                    <form id="form_sendFloor2">
                        <div class="modal fade" id="modal-container-9876543212" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-hidden="true">×
                                        </button>

                                    </div>
                                    <!--<div id="rContents" style="width: 100%" class="modal-body">-->

                                    <!--</div>-->
                                    <!--<textarea name="rContents" hidden id="text1"-->
                                    <!--style="width:100%; height:200px;"></textarea>-->

                                    <input id='reply2' name='rid' hidden>
                                    <input id='reply3' name='reFid' hidden>

                                    <!--<input type="text" hidden name="rid" id="rid">-->

                                    内容: <textarea name="reContents" id="reContents2" cols="70" rows="5"></textarea>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            取消
                                        </button>
                                        <button type="button" class="btn btn-primary" onclick="sendFloor_btn2();">回复
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>

</div>

<script>

    $(function () {
        var url = location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) {    //判断是否有参数
            var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
            strs = str.split("=");   //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
            // alert(strs[1]);          //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
        }
    });


    $(function () {

        $.ajax({
            url: "/topic/findById?tid=" + strs[1],
            type: "post",
            dataType: "json",
            success: function (data) {
                // alert(''+kname)
                /*这个方法里是ajax发送请求成功之后执行的代码*/
                showData(data);//我们仅做数据展示
            },
            error: function (msg) {
                alert("ajax连接异常：" + msg);
            }
        });
    });

    //展示数据
    function showData(data) {
        kname = data.kname;
        //拼接表格的行和列
        str = data.topicAndUser.bbsTopic.topic;
        //追加到table中
        $("#t").append(str);
        str2 = data.topicAndUser.bbsTopic.contents;
        //追加到table中
        $("#t1").append(str2);

        var strUser = "<img style='width: 80px' src='" + data.topicAndUser.user.icon + "'>";
        $("#U_Icon").append(strUser);
        $("#U_Name").append(data.topicAndUser.user.nickname);

        b = data.replyAndUserList;
        var str3 = '';
        for (var i = 0; i < b.length; i++) {
            /*显示回帖信息*/

            str3 = "<div style='height: 150px;border-bottom: #9DA0A4 solid 1px'>" + b[i].bbsReply.rContents + "<button onclick='open_rely_modal(" + b[i].bbsReply.rid + ",\"" + b[i].user.nickname + "\");'>回复</button><br><br>" +
                "<table id='tal_" + b[i].bbsReply.rid + "' style='color: #9DA0A4'></table></div>";


            $("#t2").append(str3);


            var f = "";

            $.each(b[i].floorAndUserList, function (index, sport) {

                f = "<tr><td><a style='color: #9DA0A4' onclick='open_rely_modal2(" + sport.bbsFloor.rid + ",\"" + sport.user.nickname + "\"," + sport.bbsFloor.fid + ")'>" + sport.bbsFloor.reContents + "</a></td></tr>";
                console.log(f);
                $("#tal_" + b[i].bbsReply.rid).append(f)
            })

            var c = '<div style="height: 150px"><div><a href=""><img style="width: 80px" src="' + b[i].user.icon + '" alt=""></a></div><br><div><a href="">' + b[i].user.nickname + '</a></div></div>'
            $("#t4").append(c);


        }
    }

    function open_rely_modal(rid, nickname) {
        // 1. 设置隐藏表单项value
        document.getElementById("reply").value = rid;
        document.getElementById("reContents").value = kname + ":  回复  @" + nickname + ":    ";
        // 2. 打开模态框
        $('#modal-container-987654321').modal('toggle')
    }

    function open_rely_modal2(rid, nickname, reFid) {
        // 1. 设置隐藏表单项value
        document.getElementById("reply2").value = rid;
        document.getElementById("reply3").value = reFid;
        document.getElementById("reContents2").value = kname + ":  回复  @" + nickname + ":  ";
        // 2. 打开模态框
        $('#modal-container-9876543212').modal('toggle')
    }


    function sendReply_btn() {
        $("#form_sendReply").ajaxSubmit({
            type: "post",
            url: "/reply/sendReply?tid=" + strs[1],
            success: function () {
                // alert("发表成功")
                window.location.href = "topic.html?tid=" + strs[1];
            }
        })
    }

    function sendFloor_btn() {
        $("#form_sendFloor").ajaxSubmit({
            type: "post",
            url: "/floor/sendFloor?",
            success: function () {
                // alert("发表成功")
                window.location.href = "topic.html?tid=" + strs[1];
            }
        })
    }


    function sendFloor_btn2() {
        $("#form_sendFloor2").ajaxSubmit({
            type: "post",
            url: "/floor/sendFloor?",
            success: function () {
                // alert("发表成功")
                window.location.href = "topic.html?tid=" + strs[1];
            }
        })
    }


</script>
<script src="../js/wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#rContents')
    var $text1 = $('#text1')
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create()
</script>
</body>
</html>